<template>
	<div class="common-layout">
		<el-form>
			<el-form-item>
				<label>订单号</label>
				<el-input readonly v-model="ordlist.ordid"></el-input>
			</el-form-item>
			<el-form-item>
				<label>收货地址</label>
				<el-input readonly v-model="ordlist.addr"></el-input>
			</el-form-item>
			<el-form-item>
				<label>收货电话</label>
				<el-input readonly v-model="ordlist.phone"></el-input>
			</el-form-item>
			<el-form-item>
				<label>付款状态：</label>
				<el-button type="danger" @click="show=true" v-if="ordlist.ispay==0">未付款，立即付款</el-button>
				<el-button type="success" v-else>已付款</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="arr">
			<el-table-column label="图片" width="200">
				<template #default="score">
					<el-image :src="`${$Imgurl}/showImg/${score.row.book.picture}`"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="book.name" label="商品名称" width="300" />
			<el-table-column prop="book.price" label="商品单价" width="200" />
			<el-table-column label="商品数量" prop="cart.num"></el-table-column>
			<el-table-column label="商品总价">
				<template #default="score">{{score.row.book.price*score.row.cart.num}}</template>
			</el-table-column>
		</el-table>
		<el-dialog :title="`支付金额: ${sum}元`" v-model="show" width="30%" center>
			<el-main>
				<el-button @click="show=false">取消</el-button>
				<el-button @click="getPay()">确定</el-button>
			</el-main>
		</el-dialog>
	</div>
</template>

<script>
	//引入拦截器
	import instance from '../../../../ajax'
	
	export default{
		name:'Pay',
		data(){
			return{
				arr:[],
				show:false,
				ordlist:{}
			}
		},
		created() {
			this.arr=this.$store.state.goods
			
			this.getord(this.$route.query.ordid)
		},
		computed:{
			sum(){
				let sum=0
				for (let i in this.arr) {
					sum+=this.arr[i].book.price*this.arr[i].cart.num
				}
				return sum
			}
		},
		methods:{
			getPay(){
				this.show=false
				instance.post("/api/fore/ord/addPay",{ordid: this.ordlist.ordid, ispay:1},{
					headers:{'Content-Type':'application/json'}
				}).then((res)=>{
					if (res.data.code==200) {
						this.getord(this.ordlist.ordid)
					}
				}).catch((error)=>{
					
				})
			},
			getord(id){
				instance.get(`/api/fore/ord/findInfoByOrdid/${id}`).then((res)=>{
					if (res.data.code==200) {
						this.ordlist=res.data.data.ord
					}
				}).catch((error)=>{
					
				})
			}
		}
	}
</script>

<style scoped>
	.common-layout{
		width: 80%;
		margin: 0 auto;
	}
	.el-form-item :deep(.el-form-item__content){
		display: flex;
		justify-content: flex-start;
	}
	.el-form-item :deep(.el-form-item__content) label{
		width: 10%;
		text-align: center;
	}
</style>
